<template>
  <div class="canvas1">
    <canvas :id="canvasId" width="750" height="1624"></canvas>
    <div class="allBox">
      <div class="box">
        <div class="tou">
          <div class="touImg"><img src="/static/images/template/tou.png" /></div>
          <div class="touText">
            <p class="p1">
              {{ adviserName }}
              <span>{{ houseName }}</span>
            </p>
            <p class="p2">
              <img src="/static/images/template/tel.png" alt="" />
              <span>{{ adviserTel }}</span>
              <img src="/static/images/template/wei.png" alt="" />
              <span>{{ adviserWX }}</span>
            </p>
          </div>
        </div>
        <div class="er">
          <div class="erText">
            <p>长按识别二维码</p>
            <span>
              进入小程序查看更多楼盘资讯
              <em></em>
            </span>
          </div>
          <img class="erImg" src="/static/images/template/er.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import bgMapMgr from '@/biz/bgMap/bgMap'
  export default {
    props: ['tuUrl1', 'editorInfo', 'shortDetails', 'keyIndex'],
    components: {},
    data() {
      return {
        buildMess: this.$dt.buildInfo(), //案场的所有信息
        houseName: '这里显示楼盘名称',
        articleTitle: '这是个标题样例，至多20个字。这是个标题样例',
        articleCon:
          '这是正文内容样例，至多150个字。这是正文内容样例，至多150个字。这是正文内容样例，至多150个字。这是正文内容样例，至多150个字。这是正文内容样例，至多150个字。这是正文内容样例，至多150个字。这是正文内容样例，至多150个字。这是正文内容样例，至多150个字。这是正文内容样例，至多150',
        adviserName: '麦房宝',
        adviserTel: '13888888888',
        adviserWX: 'tospur',
        imgTu: '/static/images/template/tu.jpg',
        imgHouse: '/static/images/template/fang.png',
        imgHeng: '/static/images/template/heng.png',
        canvasId: 'canvas' + this.keyIndex,
        canvasImgUrl: ''
      }
    },

    methods: {
      // 生成图片
      convertCanvasToImage() {
        var canvas = document.getElementById(this.canvasId)
        var image = new Image()
        image.crossOrigin = ''
        image.src = canvas.toDataURL('image/png')
        this.unloadFileCanvas(image.src)
      },
      unloadFileCanvas(image) {
        let params = {}
        params.multipartFile = this.base64toFile(image)
        bgMapMgr.unloadFileCanvas(params).then((res) => {
          this.canvasImgUrl = res.imageURL
          this.$store.dispatch('canvasImg', this.canvasImgUrl)
          // this.$tool.setStorage({ canvasImg: JSON.stringify(this.canvasImgUrl) })
        })
      },
      base64toFile(base, filename) {
        var arr = base.split(',')
        var mime = arr[0].match(/:(.*?);/)[1]
        var suffix = mime.split('/')[1]
        var bstr = atob(arr[1])
        var n = bstr.length
        var u8arr = new Uint8Array(n)
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n)
        }
        //转换成file对象
        return new File([u8arr], `${filename}.${suffix}`, { type: mime })
      },

      fillRoundRect(cxt, x, y, width, height, radius, fillColor, direction) {
        //圆的直径必然要小于矩形的宽高
        if (2 * radius > width || 2 * radius > height) {
          return false
        }

        cxt.save()
        cxt.translate(x, y)
        //绘制圆角矩形的各个边
        this.drawRoundRectPath(cxt, width, height, radius, direction)
        cxt.fillStyle = fillColor || '#000' //若是给定了值就用给定的值否则给予默认值
        cxt.fill()
        cxt.restore()
      },
      // strokeRoundRect(cxt, x, y, width, height, radius, /*optional*/ lineWidth, /*optional*/ strokeColor) {
      //   //圆的直径必然要小于矩形的宽高
      //   if(2 * radius > width || 2 * radius > height) {
      //     return false;
      //   }

      //   cxt.save();
      //   cxt.translate(x, y);
      //   //绘制圆角矩形的各个边
      //   this.drawRoundRectPath(cxt, width, height, radius);
      //   cxt.lineWidth = lineWidth || 2; //若是给定了值就用给定的值否则给予默认值2
      //   cxt.strokeStyle = strokeColor || "#000";
      //   cxt.stroke();
      //   cxt.restore();
      // },
      drawRoundRectPath(cxt, width, height, radius, direction) {
        cxt.beginPath(0)
        //从右下角顺时针绘制，弧度从0到1/2PI
        direction == 'down' && cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2)
        //矩形下边线
        cxt.lineTo(direction == 'up' ? 0 : radius, height)
        //左下角圆弧，弧度从1/2PI到PI
        direction == 'down' && cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI)
        //矩形左边线
        cxt.lineTo(0, direction == 'down' ? 0 : radius)
        //左上角圆弧，弧度从PI到3/2PI
        direction == 'up' && cxt.arc(radius, radius, radius, Math.PI, (Math.PI * 3) / 2)
        //上边线
        cxt.lineTo(direction == 'down' ? width : width - radius, 0)
        //右上角圆弧
        direction == 'up' && cxt.arc(width - radius, radius, radius, (Math.PI * 3) / 2, Math.PI * 2)
        //右边线
        cxt.lineTo(width, direction == 'up' ? height : height - radius)
        cxt.closePath()
      },

      textline(txt, font, width) {
        let txts = txt.split('\n')
        let line = 0
        for (var key in txts) {
          line += Math.ceil(this.getwidth(txts[key], font) / width)
        }
        return line
      },

      // 绘制自动换行的文本
      // canvasTextAutoLine(str, ctx, initX, initY, lineHeight, lineNum) {
      //   var lineWidth = 0;
      //   var canvasWidth = "670";
      //   var lastSubStrIndex = 0;
      //   var lineda = 1;
      //   for (let i = 0; i < str.length; i++) {
      //     lineWidth += ctx.measureText(str[i]).width;
      //     if (lineWidth > canvasWidth - initX || str[i] == "\n") {
      //       //减去initX,防止边界出现的问题
      //       lineda += 1;
      //       if (lineNum && lineda > lineNum + 1) {
      //         return false;
      //       } else {
      //         ctx.fillText(str.substring(lastSubStrIndex, i), initX, initY);
      //         initY += lineHeight;
      //         lineWidth = 0;
      //         lastSubStrIndex = i;
      //       }
      //     }
      //     if (i == str.length - 1) {
      //       ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY);
      //     }
      //   }
      // },
      // 绘制自动换行的文本
      canvasTextAutoLine(str, ctx, initX, initY, lineHeight, lineNum) {
        let arr = str.split('\n')
        var lineda = 1
        var canvasWidth = '656'
        arr.forEach((item, index) => {
          let lineWidth = 0
          let lastSubStrIndex = 0
          if (index > 0) {
            initY += lineHeight
            lineda += 1
          }
          if (lineNum && lineda > lineNum) {
            return false
          }

          for (let i = 0; i < item.length; i++) {
            lineWidth += ctx.measureText(item[i]).width
            if (lineWidth > canvasWidth - initX) {
              //减去initX,防止边界出现的问题
              if (lineNum && lineda > lineNum) {
                return false
              } else {
                ctx.fillText(item.substring(lastSubStrIndex, i), initX, initY)
                initY += lineHeight
                lineda += 1
                lineWidth = 0
                lastSubStrIndex = i
              }
            }
            if (i == item.length - 1) {
              ctx.fillText(item.substring(lastSubStrIndex, i + 1), initX, initY)
            }
          }
        })

        // for (let i = 0; i < str.length; i++) {
        //   lineWidth += ctx.measureText(str[i]).width;
        //   if (lineWidth > canvasWidth - initX || str[i] == "\n") {
        //     //减去initX,防止边界出现的问题
        //     lineda += 1;
        //     if (lineNum && lineda > lineNum + 1) {
        //       return false;
        //     } else {
        //       ctx.fillText(str.substring(lastSubStrIndex, i), initX, initY);
        //       initY += lineHeight;
        //       lineWidth = 0;
        //       lastSubStrIndex = i;
        //     }
        //   }
        //   if (i == str.length - 1) {
        //     ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY);
        //   }
        // }
      },

      xianDuan() {
        var canvas = document.getElementById(this.canvasId)
        var ctx = canvas.getContext('2d')
        // 加载背景图片
        ctx.beginPath()
        let img = new Image()
        img.crossOrigin = ''
        img.src = this.tuUrl1
        img.onload = () => {
          ctx.drawImage(img, 0, 0, 750, 1624, 0, 0, 750, 1624)
          // icon
          ctx.beginPath()
          let imgHouse = new Image()
          imgHouse.crossOrigin = ''
          imgHouse.src = this.imgHouse
          imgHouse.onload = () => {
            // ctx.drawImage(imgHouse, 0, 0, 48, 48, 20, 26, 24, 24);
            ctx.drawImage(imgHouse, 0, 0, 48, 48, 40, 52, 48, 48)
            // 楼盘名称
            ctx.beginPath()
            ctx.fillStyle = 'white'
            ctx.font = '40px arial'
            // ctx.fillText(this.houseName, 55, 45);
            ctx.fillText(this.houseName, 109, 96)

            ctx.closePath()
            // 绘制圆角矩形
            ctx.beginPath()
            this.fillRoundRect(ctx, 40, 140, 670, 960, 20, 'white', 'up')
            this.fillRoundRect(ctx, 40, 1134, 670, 400, 20, 'white', 'down')
            ctx.closePath()
            // 头图片
            ctx.beginPath()
            let imgTu = new Image()
            imgTu.crossOrigin = ''
            imgTu.src = this.imgTu
            imgTu.onload = () => {
              // ctx.drawImage(imgTu, 72, 680, 606, 402);
              ctx.drawImage(imgTu, 70, 670, 606, 402)
            }
            ctx.closePath()
            // 标题
            ctx.beginPath()
            ctx.fillStyle = '#333'
            ctx.font = 'bold 40px arial'
            this.canvasTextAutoLine(this.articleTitle, ctx, 72, 220, 56)
            ctx.closePath()

            ctx.beginPath()
            ctx.fillStyle = '#333'
            ctx.font = '30px arial'
            this.canvasTextAutoLine(this.articleCon, ctx, 72, 332, 46, 8)
            ctx.closePath()

            // 最后的横线
            ctx.beginPath()
            let imgHeng = new Image()
            imgHeng.crossOrigin = ''
            imgHeng.src = this.imgHeng
            imgHeng.onload = () => {
              ctx.drawImage(imgHeng, 40, 1100, 670, 34)
            }
            ctx.closePath()
          }
          ctx.closePath()
        }
        ctx.closePath()
      }
    },
    computed: {},
    created() {
      if (this.editorInfo) {
        this.houseName = this.buildMess.buHousesName
        this.articleTitle = this.editorInfo.articleName
        this.articleCon = this.editorInfo.content
        this.imgTu = this.editorInfo.fileList[0].url
      }
      if (this.shortDetails) {
        this.houseName = this.shortDetails.promotionName
          ? this.shortDetails.promotionName
          : this.buildMess.buHousesName
        this.articleTitle = this.shortDetails.title
        this.articleCon = this.shortDetails.content
        this.imgTu = this.shortDetails.picUrl
      }
    },
    mounted() {
      this.xianDuan()
    },
    watch: {
      tuUrl1(val) {
        this.tuUrl1 = val
      },
      shortDetails(val) {
        if (val) {
          this.houseName = this.shortDetails.promotionName
            ? this.shortDetails.promotionName
            : this.buildMess.buHousesName
          this.articleTitle = val.title
          this.articleCon = val.content
          this.imgTu = val.picUrl
        }
      },
      editorInfo(val) {
        if (val) {
          this.houseName = this.buildMess.buHousesName
          this.articleTitle = val.articleName
          this.articleCon = val.content
          this.imgTu = val.fileList[0].url
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .canvas1 {
    width: 750px;
    // padding: 0 20px 45px;
    // box-sizing: border-box;
    margin: 0 auto;
    // background-size: 100% 100%;
    height: 1624px;
    position: relative;
    zoom: 0.5;
    // transform-origin: 0% 0%;//设置左上角为原点
    // transform:scale(0.5,0.5);
    // margin-bottom: -50%;
  }

  .allBox {
    padding: 0 40px;
    position: absolute;
    top: 1132px;
    left: 0;
    width: 100%;
    z-index: 99999;
  }

  .box {
    padding: 24px 32px;
  }

  .box1 {
    padding: 24px 32px 24px;
    border-radius: 20px 20px 0 0;
  }

  .tou {
    background: linear-gradient(314deg, #f2e2c8 0%, #f5e9d6 100%);
    display: flex;
    flex-direction: row;
    padding: 24px;
    border-radius: 16px;

    .touImg {
      margin-right: 24px;

      img {
        width: 116px;
        height: 116px;
        border-radius: 50%;
        display: block;
      }
    }

    .touText {
      p.p1 {
        font-size: 36px;
        font-weight: 500px;
        line-height: 36px;
        color: #705f42;
        margin: 20px 0 20px;

        span {
          background: linear-gradient(90deg, #ead3ac 0%, #fce7c3 100%);
          border-radius: 20px;
          font-size: 20px;

          display: inline-block;
          padding: 2px 12px;
        }
      }

      p.p2 {
        img {
          width: 28px;
          height: 26px;
        }

        span {
          font-size: 24px;
          font-weight: 400;
          color: #524838;
          line-height: 28px;
          display: inline-block;
          margin: 0 30px 0 6px;
          vertical-align: 6px;
        }
      }
    }
  }

  .er {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 20px;

    .erText {
      flex: 1;

      p {
        font-size: 36px;
        font-weight: 800;
        color: #333333;
      }

      span {
        display: block;
        font-size: 24px;
        font-weight: 400;
        color: #333333;
        margin-top: 32px;
      }
    }

    .erImg {
      width: 140px;
      height: 140px;
      display: block;
    }
  }
</style>
